<template>
  <div class="highcharts-container"></div>
</template>

<script>
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

export default {
  props: ["optionsSeries"],
  name: "histogram",
  data() {
    var that = this;
    return {
      chart: null,
      styles: {},
      options: {
        chart: {
          type: "line",
        },
        credits: {
          enabled: false,
        },
        title: {
          text: null,
        },
        yAxis: [
          {
            min: 0,
            title: {
              text: null,
            },
          },
          {
            title: {
              text: null,
            },
            opposite: true,
          },
        ],
        xAxis: {
          categories: [
            "03-23",
            "03-24",
            "03-25",
            "03-26",
            "03-27",
            "03-28",
            "03-29",
          ],
          crosshair: {
            width: 1,
            color: "rgba(0,0,0,0.4)",
          },
        },
        tooltip: {
          headerFormat:
            '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.2f}</b></td></tr>',
          footerFormat: "</table>",
          shared: true,
          useHTML: true,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        series: [],
      },
    };
  },
  mounted() {
    this.getDays();
    this.initChart();
  },
  methods: {
    initChart() {
      this.$el.style.width = this.styles.width + "px";
      this.$el.style.height = this.styles.height + "px";
      this.chart = new Highcharts.Chart(this.$el, this.options);
    },
    // 获取当前日期的前7天
    getDays() {
      //设置日期，当前日期的前七天
      let myDate = new Date(); //获取今天日期
      myDate.setDate(myDate.getDate() - 7);
      let dateArray = [];
      let dateTemp;
      let flag = 1;
      let month;
      let date;
      for (var i = 0; i < 7; i++) {
        month = myDate.getMonth() + 1;
        date = myDate.getDate();
        if (date < 10) date = `0${date}`;
        if (month < 10) month = `0${month}`;
        dateTemp = month + "-" + date;
        dateArray.push(dateTemp);
        myDate.setDate(myDate.getDate() + flag);
      }
      this.options.xAxis.categories = dateArray;
    },
  },
  watch: {
    optionsSeries(value) {
      this.options.series = value;
      this.initChart();
    },
  },
};
</script>

<style lang="scss">
@media (max-width: 1366px) {
  .highcharts-container {
    margin-top: 10px;
    width: 100%;
    height: 140px;
  }
}
@media (min-width: 1366px) {
  .highcharts-container {
    margin-top: 10px;
    width: 100%;
    height: 140px;
  }
}
@media (min-width: 1440px) {
  .highcharts-container {
    margin-top: 10px;
    width: 100%;
    height: 160px;
  }
}
@media (min-width: 1680px) {
  .highcharts-container {
    margin-top: 10px;
    width: 100%;
    height: 180px;
  }
}
</style>
